<template>
  <van-tabbar v-model="active">
    <van-tabbar-item v-for="item in iconlist" :key="item.id" :to="item.route">
      <span>{{ item.title }}</span>
      <template #icon="props">
        <img :src="props.active ? item.active : item.inactive" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const { iconlist, active } = fn();
    //防止刷行 导致底部tabbar与当前页面不匹配
    const CURRENTHREF = window.location.hash;
    if (CURRENTHREF.includes("#/home/main")) {
      active.value = 0;
    } else if (CURRENTHREF.includes("#/home/list")) {
      active.value = 1;
    } else if (CURRENTHREF.includes("#/home/achievement")) {
      active.value = 2;
    } else if (CURRENTHREF.includes("#/home/mine")) {
      active.value = 3;
    }
    return { iconlist, active };
  },
};
function fn() {
  const active = ref(0);
  const iconlist = [
    {
      active: require("../../assets/image/shouye1.png"),
      inactive: require("../../assets/image/shouye.png"),
      title: "首页",
      id: new Date().getTime(),
      route: "/home/main",
    },
    {
      active: require("../../assets/image/kecheng1.png"),
      inactive: require("../../assets/image/kecheng.png"),
      title: "课程",
      id: new Date().getTime(),
      route: "/home/list",
    },
    {
      active: require("../../assets/image/chengzhang1.png"),
      inactive: require("../../assets/image/chengzhang.png"),
      title: "成长",
      id: new Date().getTime(),
      route: "/home/achievement",
    },
    {
      active: require("../../assets/image/wode1.png"),
      inactive: require("../../assets/image/wode.png"),
      title: "我的",
      id: new Date().getTime(),
      route: "/home/mine",
    },
  ];
  return { iconlist, active };
}
</script>

<style></style>
